// script.js
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        const targetId = this.getAttribute('href');
        if (targetId !== "#") e.preventDefault();

        // 隐藏所有内容区域
        document.querySelectorAll('.page-content > div').forEach(el => {
            el.style.display = 'none';
        });

        // 控制侧边栏显示
        const sidebar = document.querySelector('.sidebar');
        if (targetId === '#experiment' || 
            targetId.startsWith('#start_experiment') || 
            targetId.startsWith('#learning_task')) {
            sidebar.style.display = 'block'; // 实验页面显示侧边栏
        } else {
            sidebar.style.display = 'none'; // 其他页面（如主页）隐藏
        }

        // 显示目标区域
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
            targetElement.style.display = 'block';
            window.scrollTo({
                top: targetElement.offsetTop,
                behavior: 'smooth'
            });
        }
    });
});

// 页面加载时默认显示首页
// 页面加载时默认显示主页
window.addEventListener('DOMContentLoaded', () => {
    // 隐藏所有内容区域
    document.querySelectorAll('.page-content > div').forEach((el, index) => {
        el.style.display = index === 0 ? 'block' : 'none';
    });

    // 根据当前锚点判断是否显示侧边栏
    const sidebar = document.querySelector('.sidebar');
    const hash = window.location.hash || '#home';
    if (hash === '#home' || hash === '') {
        sidebar.style.display = 'none'; // 主页隐藏
    } else if (hash.startsWith('#start_experiment') || hash.startsWith('#learning_task')) {
        sidebar.style.display = 'block'; // 子页面显示
    }
});




// 侧边栏逻辑
document.addEventListener('DOMContentLoaded', function () {
    // 全局状态存储
    const state = {
        activePrimary: null,
        activeSecondary: null
    };

    // 工具函数
    const updateState = (type, element) => {
        if (type === 'primary') {
            if (state.activePrimary) {
                state.activePrimary.classList.remove('active');
                state.activePrimary.querySelector('.sub-menu')?.classList.remove('active');
            }
            state.activePrimary = element;
        } else if (type === 'secondary') {
            if (state.activeSecondary) {
                state.activeSecondary.classList.remove('active');
                state.activeSecondary.querySelector('.third-menu')?.classList.remove('active');
            }
            state.activeSecondary = element;
        }
    };


    // 一级菜单点击
    document.querySelectorAll('.menu-item').forEach(item => {
        const trigger = item.querySelector('span');
        const subMenu = item.querySelector('.sub-menu');

        trigger.addEventListener('click', function (e) {
            e.stopPropagation();

            // 关闭所有其他菜单
            document.querySelectorAll('.menu-item').forEach(other => {
                if (other !== item) {
                    other.classList.remove('active');
                    other.querySelector('.sub-menu')?.classList.remove('active');
                }
            });

            // 切换当前菜单状态
            item.classList.toggle('active');
            subMenu.classList.toggle('active');
        });
    });
    // 二级菜单点击
    document.querySelectorAll('.sub-item').forEach(item => {
        const trigger = item.querySelector('span');
        const thirdMenu = item.querySelector('.third-menu');

        trigger.addEventListener('click', function (e) {
            e.stopPropagation();

            if (item.classList.contains('active')) {
                // 收起当前菜单
                item.classList.remove('active');
                thirdMenu.classList.remove('active');
                state.activeSecondary = null;
            } else {
                // 收起所有其他二级菜单
                document.querySelectorAll('.sub-item').forEach(other => {
                    other.classList.remove('active');
                    other.querySelector('.third-menu')?.classList.remove('active');
                });

                // 展开当前菜单
                item.classList.add('active');
                thirdMenu.classList.add('active');
                updateState('secondary', item);

                // 自动展开父级一级菜单
                const parentMenuItem = item.closest('.menu-item');
                if (!parentMenuItem.classList.contains('active')) {
                    parentMenuItem.classList.add('active');
                    parentMenuItem.querySelector('.sub-menu')?.classList.add('active');
                    updateState('primary', parentMenuItem);
                }
            }
        });
    });
});

